In recent years, the Canvas function in JavaScript (registered trademark) is being used as a method for displaying video on a client terminal in a server-client environment (for example, see Patent Literature 1). In Canvas, line segments, arcs, circles, curved lines, and the like are designated with predetermined drawing commands, and video is displayed on the client terminal by displaying drawing data at a predetermined frame rate.
FIGS. 7 and 8 show video frames for a video in which drawing data, drawn with a conventional method, change from an “angry face” (FIG. 7) to a “smiling face” (FIG. 8). Conventionally, the drawing data illustrated in FIG. 7 are drawn with code using the Canvas function as illustrated in FIG. 9. Specifically, line 21 of FIG. 9, “ctx.moveTo(20,20)”, designates point P1 in FIG. 7. Next, line 22 of FIG. 9, “ctx.quadraticCurveTo(120,20,70,−20)”, designates a curved line with point P1 as the starting point and point P2 as the ending point in FIG. 7. Line 23, “ctx.quadraticCurveTo(120,120,160,70)”, designates a curved line with point P2 as the starting point and point P3 as the ending point in FIG. 7. Line 24, “ctx.quadraticCurveTo(20,120,70,160)”, designates a curved line with point P3 as the starting point and point P4 as the ending point. Furthermore, line 25, “ctx.quadraticCurveTo(20,20,−20,70)”, designates a curved line with point P4 as the starting point and point P1 as the ending point in FIG. 7. In this way, the outline of the face in FIG. 7 is designated by lines 21 through 25 in FIG. 9.
Line 31 of FIG. 9, “ctx.arc(30,110,5,0,Math.PI*2,false)”, designates a circle with a radius of 5, with point P5 in FIG. 7 as the center. Line 32, “ctx.arc(110,110,5,0,Math.PI*2,false)”, designates a circle with a radius of 5, with point P6 in FIG. 7 as the center. Next, line 33, “ctx.moveTo(30,30)” designates point P7 in FIG. 7. Line 34, “ctx.quadraticCurveTo(30,110,70,70)”, then designates a curved line with point P7 as the starting point and point P8 as the ending point in FIG. 7. Lines 31 to 34 thus designate eyes and an angry mouth. The above processing generates the drawing data illustrated in FIG. 7.
The drawing data in FIG. 8 are generated based on the code in FIG. 10. Specifically, line 21 of FIG. 10, “ctx.moveTo(20,20)”, designates point P1 in FIG. 8. Line 22, “ctx.quadraticCurveTo(120,20,70,−20)”, then designates a curved line with point P1 as the starting point and point P2 as the ending point in FIG. 8. Line 23, “ctx.quadraticCurveTo(120,120,160,70)”, designates a curved line with point P2 as the starting point and point P3 as the ending point in FIG. 8. Line 24, “ctx.quadraticCurveTo(20,120,70,160)”, designates a curved line with point P3 as the starting point and point P4 as the ending point in FIG. 8. Furthermore, line 25, “ctx.quadraticCurveTo(20,20,−20,70)”, designates a curved line with point P4 as the starting point and point P1 as the ending point in FIG. 8. In this way, the outline of the face in FIG. 8 is designated by lines 21 through 25 in FIG. 10.
Line 31 of FIG. 10, “ctx.arc(30,110,5,0,Math.PI*2,false)”, designates a circle with a radius of 5, with point P5 in FIG. 8 as the center. Line 32, “ctx.arc(110,110,5,0,Math.PI*2,false)”, designates a circle with a radius of 5, with point P6 in FIG. 8 as the center. Next, line 33, “ctx.moveTo(30,30)” designates point P7 in FIG. 8. Line 34, “ctx.quadraticCurveTo(30,110,70,−10)”, then designates a curved line with point P7 as the starting point and point P8 as the ending point in FIG. 8. Lines 31 to 34 thus designate and draw the eyes and smiling mouth in FIG. 8. The above processing generates the drawing data illustrated in FIG. 8. Video is displayed by displaying FIGS. 7 and 8 at predetermined time intervals (frame rate).